<script setup >
import { onMounted, ref } from 'vue';
import Button from './Button_lxw.vue';

const props = defineProps(['file', 'accept']);
const emit = defineEmits(['update:file']);

const file_input_ref = ref(null)
const file_name = ref("")

onMounted(() => {
    file_input_ref.value.addEventListener("input", () => {
        emit('update:file', file_input_ref.value.files)
        if(file_input_ref.value.files.length>0) {
            file_name.value = file_input_ref.value.files[0]['name']
        }
    })
})

function openFileExplorer() {
    file_input_ref.value.click();
}

</script>

<template>
    <div class="file-input" >
        <div class="file-name" >{{ file_name }}</div>
        <Button class="input-button" @click="openFileExplorer" >选择文件</Button>
        <input class="input" type="file" ref="file_input_ref" :accept="props.accept" />
    </div>

</template>

<style scoped >


.file-input {
    display: flex;
    justify-content: center;
    align-items: center;
}

.file-name {
    text-overflow: ellipsis;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #c8c9cc;
    height: 30px;
    width: 250px;
    padding: 5px 5px;
    font-size: 16px;
}



.input-button {
    width: 100px !important;
    border: none !important;
    background-color: #909399 !important;
    color:  #f4f4f5;
}

.input[type=file] {
    display: none;
}

</style>